<!--
 * @Author: your name
 * @Date: 2021-08-16 15:53:52
 * @LastEditTime: 2021-08-23 12:17:22
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \orderSystems\src\views\menuMag\DishTaste.vue
-->
<template>
  <div id="dish-taste">
      <!-- 菜品口味 -->
    <!-- 查询部分 -->
    <Search :moudleName="tableName" @shareSearchStatus="shareSearchStatus"></Search>
    <!-- 表格数据部分 -->
    <div class="table-box">
        <DishTable 
        :moudleName="tableName"
        :tableType="tableType"
        :tableDatas="tableData"
        :clickNowPage="page"
        :pageCount="pageSize"
        :nowPageSize="nowTotalSize"
        @shareData="shareData"
        ></DishTable>
        <!-- 分页部分 -->
        <Pagination
        :totalCount="allCount"
        @shareData="shareData"
        ></Pagination>
    </div>
  </div>
</template>

<script>
import Search from './search.vue'
import DishTable from './DishTable.vue'
import Pagination from '@/components/common/Pagination'
export default {
    components:{
        Search,
        DishTable,
        Pagination,
    },
    data(){
      return{
        tableName:'菜品口味',//模块名称
        tableType:"口味名称",//表格数据的表头内容
        tableData:[
         /*  {
          id: 0, //序号
          category: "", //类别名称
          status: 0, //状态
          notes: "", //备注
          } */
        ],//表格需要渲染的数据
        page:1,//分页页码
        pageSize:5,//每页展示数据条数
        allCount:0,//总数据条数
        nowTotalSize:0,//当前页实际数据数量
        flag:false,//查询的标志变量，false表示没查询
        name:'',//查询的名字
      }
    },
    created(){
      this.getDishTasteSearchInfo(this.name,this.page,this.pageSize);//初始化页面数据
      
    },
    methods:{
       /**
     * @description: 使用查询功能时，子传父触发的事件
     * @param {*} v 从search子组件接收的数据
     * @return {*}
     */    
    shareSearchStatus(v){
      this.tableData=v.tableData;//查询的数据
      this.flag=v.searchStatus;//代表查询的状态标志
      this.allCount=v.totalCount;//查询的总条数
      this.name=v.name;//查询的名字
      // console.log(this.flag);
    },
      /**
     * @description: 表格子组件和分页子组件向父组件传值触发的函数
     * @param {*} v 传给父组件值 是一个对象
     * @return {*}
     */    
    shareData(v){
      this.page=v.nowPage;//当前页
      this.pageSize=v.pageCount; //当前页数据条数
      //  if(this.flag){//使用查询功能时，渲染的表格数据
      //   console.log('xxxxxx');
        this.getDishTasteSearchInfo(this.name,this.page,this.pageSize)
      /* }else{//没有使用查询功能时，渲染表格的数据
        this.getDishTasteInfo(this.page,this.pageSize);//更新表格数据
      } */
      
    },
      /**
       * @description: 初始化菜品口味页面数据函数
       * @param {*} page  当前页
       * @param {*} pageSize 显示数据条数
       * @return {*}
       */      
      /* async getDishTasteInfo(page,pageSize){
        const{data:res}=await this.axios.post("/dishTaste/list",{
          page:page,
          pageSize:pageSize
        })
        if(res.code==200){
          console.log(res);
          this.tableData=res.data;//将表格数据存入tableData数组中，并通过父传子传给table子组件
          //将表格里的属性名taste修改为表格数据中定义的名字
          this.tableData= JSON.parse(JSON.stringify(this.tableData).replace(/taste/g,"category"));
          this.allCount=res.count;//接收总数据条数
          this.nowTotalSize=res.data.length;//当前点击页的数据条数
        }

      }, */
      /**
     * @description: 查询时获取当前页的数据函数
     * @param {*} page 当前页码
     * @param {*} pageSize  显示数据条数
     * @return {*}
    */    
    async getDishTasteSearchInfo(name,page,pageSize) {
      const { data: res } = await this.axios.post("/dishTaste/list",{
        name:name,
        page:page,
        pageSize:pageSize,
      });
      // console.log(res);
      if(res.code==200){
        console.log(res);
          this.tableData=res.data;//将表格数据存入tableData数组中，并通过父传子传给table子组件
          //将表格里的属性名taste修改为表格数据中定义的名字
          this.tableData= JSON.parse(JSON.stringify(this.tableData).replace(/taste/g,"category"));
          this.allCount=res.count;//接收总数据条数
          this.nowTotalSize=res.data.length;//当前点击页的数据条数
      }
    }
    }

}

</script>

<style lang='less' scoped>
.table-box{
    margin-top: 1.5rem;
    border:.1rem solid #dbe0e9;
    background-color: #fff;
}

</style>
